<script setup lang='ts'>
defineProps<{
  title: string
}>()
</script>

<template>
  <div mb20>
    <!-- 头部 -->
    <div class="header" flex-middle>
      <span t16b6>{{ title }}</span>
      <div flex-middle>
        <slot name="left" />
      </div>
      <div ml-auto flex-middle>
        <slot name="right" />
      </div>
    </div>
    <!-- 内容 -->
    <div flex flex-col gap32 px24 pt24>
      <slot />
    </div>
  </div>
</template>

<style lang='less' scoped>
.header {
  height: 50px;
  padding: 0 24px;
  border-bottom: 1px solid #e1e8f0;
}
</style>
